<template>
  <div :class="$style.container">
    <el-row>
      <el-col :span="4">
        <el-card :class="$style.box">
          <nuxt-link 
            v-for="(item, idx) in menus"
            :class="$style.item"
            :to="'/user'+item.url"
            :key="'menu'+idx" 
            tag="div">{{ item.name }}</nuxt-link>
        </el-card>
      </el-col>
      <el-col 
        :span="19" 
        style="padding-left:10px;">
        <router-view/>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          url: '/film',
          name: '我的电影'
        },
        {
          url: '/order',
          name: '我的订单'
        },
        {
          url: '/order',
          name: '我的收藏'
        },
        {
          url: '/setting',
          name: '个人信息'
        }
      ]
    }
  }
}
</script>

<style lang='scss' module>
.container {
  .box {
    min-height: 500px;
    .item {
      height: 22px;
      margin: 12px 0px;
      font-size: 16px;
      color: #222;
      cursor: pointer;
      &:hover {
        color: #e36049;
      }
    }
  }
}
</style>
